<template>
	<view class="page-profile padding-bottom-xs">
		<!-- 顶部 开始 -->
		<view class="head-container" :style="{height: `calc(376rpx + ${StatusBar}px)`}">
			<view class="head-top" :style="{height: `calc(300rpx + ${StatusBar}px)`}">
				<view class="user-info flex justify-start align-center">
					<button class="cu-btn" open-type="getUserInfo" style="width:100rpx;height100rpx;border:none;background:transparent"
					 @getuserinfo="getUserInfo" v-if="!userInfo.avatar||!userInfo.nickname">
						<view class="cu-avatar round custom-avatar" />
					</button>
					<view class="flex align-center" v-else @click="showMyInfo">
						<image class="cu-avatar round custom-avatar" :src="userInfo.avatar" mode="aspectFill" />
						<view class="margin-left-sm">
							<text class="text-white">{{userInfo.nickname}}</text>
						</view>
					</view>
					<!-- <view style="display: flex;justify-content: center;align-items: center;">
					  <view >
					    <open-data type="userAvatarUrl" @click="showMyInfo"/>
					  </view>
					  <view>
					    <open-data type="userNickName" lang="zh_CN"/>
					  </view>
					</view> -->
				</view>
			</view>
			<view class="head-bottom margin-lr-sm bg-white padding-sm flex justify-between align-center">
				<block v-for="(item,index) in tabList" :key="index">
					<view class="flex-sub flex flex-direction justify-center align-center custom-tab" @click="toPage(item)">
						<view class="text-sm">{{item.value}}</view>
						<view class="text-xs">{{item.title}}</view>
					</view>
				</block>
			</view>
		</view>
		<!-- 顶部 结束 -->

		<view class="cu-list menu sm-border card-menu custom-menu">
			<block v-for="(item,index) in menuList1" :key="index">
				<view class="cu-item arrow" @click="toPage(item)">
					<view class="content flex align-center justify-start">
						<view class="img-box-list margin-right">
							<image :src="item.imgPath" mode="widthFix" />
						</view>
						<view class="text-sm menu-list-title">{{item.title}}</view>
					</view>
				</view>
			</block>
		</view>
		<view class="cu-list menu sm-border card-menu custom-menu">
			<block v-for="(item,index) in menuList2" :key="index">
				<view class="cu-item arrow" @click="toPage(item)">
					<view class="content flex align-center justify-start">
						<view class="img-box-list margin-right">
							<image :src="item.imgPath" mode="widthFix" />
						</view>
						<view class="text-sm menu-list-title">{{item.title}}</view>
					</view>
				</view>
			</block>
		</view>
		<view class="cu-list menu sm-border card-menu custom-menu">
			<block v-for="(item,index) in menuList3" :key="index">
				<view class="cu-item arrow" @click="toPage(item)">
					<view class="content flex align-center justify-start">
						<view class="img-box-list margin-right">
							<image :src="item.imgPath" mode="widthFix" />
						</view>
						<view class="text-sm menu-list-title">{{item.title}}</view>
					</view>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
	import {
		mapMutations
	} from "vuex"
	export default {
		data() {
			return {
				headIcon: '',
				pageInfo: {
					fans_count: 0,
					zans_count: 0,
					views_count: 0,
					comments_count: 0,
					shares_count: 0
				},
				menuList1: [{
					title: '我的直播',
					imgPath: '/static/images/profile-live.png',
					type: 'jump',
					jumpPath: '/pages/profile/liveMy'
				}, {
					title: '我的视频',
					imgPath: '/static/images/profile-video.png',
					type: 'jump',
					jumpPath: '/pages/profile/videoMy'
				}],
				menuList2: [{
						title: '我的关注',
						imgPath: '/static/images/profile-follow.png',
						type: 'jump',
						jumpPath: '/pages/profile/followMy'
					}, {
						title: '我的收藏',
						imgPath: '/static/images/profile-collect.png',
						type: 'jump',
						jumpPath: '/pages/profile/collectMy'
					}, {
						title: '我的评论',
						imgPath: '/static/images/profile-comment.png',
						type: 'jump',
						jumpPath: '/pages/profile/commentMy'
					},
					{
						title: '我的消息',
						imgPath: '/static/images/profile-comment.png',
						type: 'jump',
						jumpPath: '/pages/profile/newsMy'
					}
				],
				menuList3: [{
					title: '系统帮助',
					imgPath: '/static/images/profile-system.png',
					type: 'jump',
					jumpPath: '/pages/profile/system'
				}, {
					title: '意见反馈',
					imgPath: '/static/images/profile-feedback.png',
					type: 'jump',
					jumpPath: '/pages/profile/feedback'
				}, {
					title: '资料设置',
					imgPath: '/static/images/profile-setting.png',
					type: 'jump',
					jumpPath: '/pages/profile/setting'
				}]
			};
		},
		computed: {
			tabList() {
				return [{
					title: '粉丝',
					value: this.pageInfo.fans_count,
					type: 'jump',
					jumpPath: '/pages/profile/fans'
				}, {
					title: '获赞',
					value: this.pageInfo.zans_count,
					type: 'jump',
					jumpPath: '/pages/profile/fabulous'
				}, {
					title: '播放',
					value: this.pageInfo.views_count,
					type: 'jump',
					jumpPath: '/pages/profile/play'
				}, {
					title: '评论',
					value: this.pageInfo.comments_count,
					type: 'jump',
					jumpPath: '/pages/profile/comment'
				}, {
					title: '分享',
					value: this.pageInfo.shares_count,
					type: 'jump',
					jumpPath: '/pages/profile/share'
				}]
			},
		},
		methods: {
			toPage(item) {
				// #ifdef MP-WEIXIN
				if (this.userInfo.avatar) {
					if (item.type === 'jump') {
						this.$h.router.push({
							path: item.jumpPath
						})
					}
				} else {
					this.$h.toast("请先授权个人信息")
				}
				// #endif
				// #ifdef H5
				if (item.type === 'jump') {
					this.$h.router.push({
						path: item.jumpPath
					})
				}
				// #endif
			},
			showMyInfo() {
				this.$h.router.push({
					path: '/pages/my/my'
				})
			},
			async getPage() {
				let {
					data
				} = await this.waitingLoading(this.$h.api.userModel.getMyPage)()
				if (this.$h.utils.isNotEmptyObj(data)) {
					this.pageInfo = data
					this.SET_USERINFO(data)
				}
			},
			getUserInfo(res) {
				if (res.detail.userInfo) {
					this.pageInfo = {
						...this.pageInfo,
						nickname: res.detail.userInfo.nickName,
						avatar: res.detail.userInfo.avatarUrl,
					}
					this.SET_USERINFO(this.$h.utils.deepClone(this.pageInfo))
					this.$h.router.push({
						path:"/pages/profile/setting"
					})
				} else {
					if (res.detail.errMsg) {
						uni.showModal({
							title: '提示',
							content: '若不授权微信登录，则无法使用小程序。点击"授权"按钮并允许使用"用户信息"方可正常使用。',
							showCancel: false,
							confirmText: '授权',
							success: (res => {
								uni.openSetting({
									success: (res) => {
										console.log(res)
									}
								})
							})
						})
					}
				}
			},
			...mapMutations('user', ['SET_USERINFO'])
		},
		onShow() {
			if (this.token) {
				//获取用户信息
				this.getPage()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page-profile {
		position: relative;

		/* 顶部开始 */
		.head-container {
			position: relative;

			.head-top {
				background-color: $mainColor;
				position: relative;

				.user-info {
					position: absolute;
					bottom: 84rpx;
					left: 20rpx;

					.cu-avatar.custom-avatar {
						width: 100rpx;
						height: 100rpx;
					}
				}
			}

			.head-bottom {
				width: calc(100% - 40rpx);
				height: 120rpx;
				border-radius: 10rpx;
				position: absolute;
				left: 0;
				right: 0;
				margin: auto;
				bottom: 0;

				.custom-tab {
					height: 50rpx;
					border-right: 2rpx solid $bgColor;
					color: #5C5C5E;

					&:last-child {
						border-right: 0;
					}
				}
			}
		}

		/* 顶部结束 */
		.cu-list.card-menu.custom-menu {
			margin: 20rpx;
			border-radius: 10rpx;

			&.sm-border>.cu-item::after {
				left: 90rpx;
				border-bottom: 2rpx solid $bgColor;
			}

			&.sm-border>.cu-item::before {
				color: $textColor;
			}

			.img-box-list {
				width: 36rpx;
				height: 36rpx;

				image {
					width: 36rpx;
					height: 36rpx;
				}
			}

			.menu-list-title {
				color: #5C5C5E;
			}
		}
	}

	button {
		width: 100%;
		height: 100%;
		background-color: #fff;
		padding: 0;
		display: flex;
		align-items: center;
	}

	button::after {
		border: none;
		border-radius: 0;
	}
</style>
